<template>
<div>
    <div v-show="!unlogin" id="myUnBlogContent">
        <div id="aboutMe">
            <div style="text-align:center">
                <p>关于我</p>
                <input type="button" @click="login" value="登陆" style="pointer-event:visible">
                <input type="button" @click="regist" value="注册">
            </div>
            
        </div>
    </div>
    <div v-show="unlogin" id="myBlogContent">
        <div id="aboutMe">
            <div style="width:300px;height:100px">
                <p style="text-align:center">登陆成功！</p>
                <a style="float:right;font-size:15px;color:white"  @click="exit">退出</a>
            </div>
            
        </div>
        <div id="aboutMe-body">
            <el-row style="height: 500px;width: 100%;display: flex;align-items: center;justify-content: center;">
                <el-col :span="6" style="border-right:2px solid white;height:300px;display:flex;align-items: center;">
                    <el-menu
                    default-active="1"
                    class="el-menu-vertical-demo"
                    @open="handleOpen"
                    @close="handleClose"
                    background-color="transparent"
                    text-color="#fff"
                    active-text-color="#2eeba8"
                    style="border:none"
                    >
                    <el-menu-item index="1">
                        <i class="el-icon-menu"></i>
                        <router-link to="/myBlog/myArtical">
                            <a style="font-size:20px;color:white;text-decoration:none">我的文章</a>
                        </router-link>
                    </el-menu-item>
                    <el-menu-item index="2">
                        <i class="el-icon-menu"></i>
                        <router-link to="/myBlog/searchArtical">
                        <a style="font-size:20px;color:white;text-decoration:none">搜索文章</a>
                        </router-link>
                    </el-menu-item>
                    <el-menu-item index="3">
                        <i class="el-icon-document"></i>
                        <router-link to="/myBlog/draftBox">
                        <a style="font-size:20px;color:white;text-decoration:none">草稿箱</a>
                        </router-link>
                    </el-menu-item>
                    <el-menu-item index="4">
                        <i class="el-icon-setting"></i>
                        <router-link to="/myBlog/myAccount">
                        <a style="font-size:20px;color:white;text-decoration:none">我的留言</a>
                        </router-link>
                    </el-menu-item>
                    </el-menu>
                </el-col>
                <el-col :span="18">
                    <router-view></router-view>
                </el-col>
            </el-row>
        </div>   
    </div>
</div>
</template>
<script>
  export default {
      data(){
          return{
              unlogin:false
          }
      },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      login(){
          this.$router.push("/login")
        },
      regist(){
          this.$router.push("/regist")
        },
      exit(){
          this.unlogin=false;
          sessionStorage.setItem("sta","0");
          sessionStorage.removeItem("username")
        }
    },
    mounted:function(){
        if(sessionStorage.getItem("sta")=="1"){
            this.unlogin=true;
        }
        else{
            this.unlogin=false;
        }
        // this.$router.push('/myBlog/myArtical')
    }
  }
</script>
<style scoped>
    #aboutMe{
        width: 100%;
        height:600px;
        background-color: aquamarine;
        background-image: url("../assets/image/sunset.jpg");
        background-size: cover;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 30px;
        color:white;
    }
    #aboutMe-body{
        height: 500px;
        width:100%;
        background-color: #353434;
        /* background-image: url('../assets/image/t01c4e3b9a06cd5d60c.jpg'); */
        background-size: cover;
        background-position: center;
    }
    #myUnBlogContent{
        width:100%;
        height: 500px;

    }
    #myUnBlogContent #aboutMe{
        width: 100%;
        height:600px;
        background-color: aquamarine;
        background-image: url("../assets/image/sunset.jpg");
        background-size: cover;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 30px;
        color:white;
    }
    #myUnBlogContent #aboutMe input{
        background-color: aquamarine;
        border:none;
        border-radius: 5px;
        width:60px;
        height: 30px;
        margin: 20px;
    }
    .el-menu-item{
        text-align: left;
    }
</style>